<template>
  <div class="warningRecords">
    <div class="header">
      <BasicForm @register="register" @submit="getStationData" style="width: 100%" />
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <TableList
        :tableDataSource="state.tableDataSource"
        :tableColumns="state.tableColumns"
        rowKey="tmMin"
        @cellClick="cellClick"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, watch, inject, onMounted } from "vue";
  import dayjs from "dayjs";
  import { BasicForm, FormSchema, useForm } from "@gui-pkg/antdcomponents";
  import TableList from "@/components/TableList";

  defineOptions({ name: 'WarningRecords' });


  const defaultTime = [dayjs().subtract(7, "day"), dayjs()];
  const schemas: FormSchema[] = [
    {
      field: "time",
      component: "RangePicker",
      defaultValue: [dayjs().subtract(7, "day"), dayjs()],
      label: "起止时间",
      colProps: { span: 8 },
      componentProps: {
        ranges: {
          '最近一天': [dayjs().subtract(1, "day"), dayjs()],
          '最近三天': [dayjs().subtract(3, "day"), dayjs()],
          '最近一周': [dayjs().subtract(7, "day"), dayjs()],
        },
      }
    },
  ];

  const [register, { getFieldsValue }] = useForm({
    labelWidth: 80,
    schemas,
    actionColOptions: { span: 6 },
  });

  const state = reactive({
    tableDataSource: [],
    tableColumns: [
      { dataIndex: "time", title: "预警开始时间", align: "center" },
      { dataIndex: "drp", title: "预警结束时间", align: "center" },
      { dataIndex: "dyp", title: "告警类型", align: "center" },
      { dataIndex: "dyp", title: "预警区域", align: "center" },
      { dataIndex: "dyp", title: "告警描述", align: "center" },
    ],
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .warningRecords {
    width: 100%;
    height: 100%;
    .header {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      margin-bottom: 18px;
      ::v-deep(.ant-form-item) {
        margin-bottom: 0 !important;
      }
      .step {
        margin-left: 10px;
        margin-right: 30px;
      }
    }
    .content {
      width: 100%;
      height: calc(100% - 50px);
      display: flex;
      align-items: center;
      position: relative;
    }
  }
</style>
